<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>药剂管理</el-breadcrumb-item>
          <el-breadcrumb-item>药剂信息管理</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="药剂相关信息管理" :column="3"  border>

    <!-- 药品号 -->

    <el-descriptions-item label="药品号" >

      <el-input v-model="pill.pillId" style="width: 220px" placeholder="请输入药品号" clearable />

    </el-descriptions-item>

      <el-descriptions-item label="药品名称" >

      <el-input v-model="pill.pillName" style="width: 220px" placeholder="请输入药品名称" clearable />

    </el-descriptions-item>

      <el-descriptions-item label="药品号" >

      <el-input v-model="pill.function" style="width: 220px" placeholder="请输入药品作用" clearable />

    </el-descriptions-item>


  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

   <el-button type="primary" round @click="addPill"  >添加</el-button>
   <el-button type="primary" round @click="deletePill" >删除</el-button>
     
<el-divider/>
   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';



const pill = ref({
 
  pillId:'',

  pillName:'',

  function:'',

});

 const tableData = ref([]);


// function addPill() {

//       axios.get(`http://localhost:8080/pill/findPillById?pillId=${pill.value.pillId}`)

//         .then((response) => {

//           // 处理单个对象的结果
//             tableData.value = [response.data];

//         })

//         .catch((error) => {

//           console.error(error);


//         });

//     }

// function deletePill() {

//       axios.get(`http://localhost:8080/pill/findPillAll`)

//         .then((response) => {

//           // 后端返回的是一个包含多个对象的数组，直接赋值给tableData

//           tableData.value = response.data;

//         })

//         .catch((error) => {

//           console.error(error);

//         });

//     }

</script>